<template>
  <div class="edit app-container">
    <div class="content">
      <el-form ref="form" :model="form" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品名称:">
              粽子（普通包装）
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品分类:">
              食品
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格单位:">
              袋（6个）600g
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="image">
              <div style="margin: 5px 0 5px 10px;">
                <el-radio-group v-model="radio1">
                  <el-radio-button label="No.1"></el-radio-button>
                  <el-radio-button label="No.2"></el-radio-button>
                  <el-radio-button label="No.3"></el-radio-button>
                  <el-radio-button label="No.4"></el-radio-button>
                </el-radio-group>
              </div>
              <div style="margin: 5px 0 5px 10px;">蒙牛 特仑苏 纯牛奶250ml*16每100ml含3.6g优质蛋白质 礼盒装</div>
              <div style="margin: 0px 0 5px 10px;">数量：2</div>
              <div style="display: flex;flex-wrap: wrap;">
                <div class="image-item" v-for="item in 5" :key="item">
                  <el-image style="width: 80px; height: 80px"
                    src="https://img13.360buyimg.com/seckillcms/s250x250_jfs/t1/27510/30/17238/111828/62a449f1Eb0c679a6/1cee2abb190eea27.jpg"
                    fit="cover"></el-image>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="list">
              <div class="list-item" v-for="item in 5" :key="item">
                <div class="col-1">
                  <el-image style="width: 50px; height: 50px"
                    src="https://img13.360buyimg.com/seckillcms/s250x250_jfs/t1/27510/30/17238/111828/62a449f1Eb0c679a6/1cee2abb190eea27.jpg"
                    fit="cover"></el-image>
                  <div style="margin-left: 10px;">破****空</div>
                </div>
                <div class="col-2">
                  <div class="col-2-title">
                    <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}">
                    </el-rate>
                    <div>2022-06-22 12:12:12</div>
                  </div>
                  <div class="col-2-text">
                    蒙牛特仑苏的纯牛奶很好，奶源很好，3.6g优质蛋白质，营养物质丰富的一款牛奶。这款牛奶很好喝，味道不一样，感觉比其他的牛奶味道更好，平时就喜欢蒙牛的特仑苏，别的牌子很少买。特仑苏很香很纯，含脂肪7%，钙含量15%，味道就是非常纯正的，也很香甜，营养价值还很高。真的很喜欢喝，每天早晚各一瓶，喝牛奶可以补钙，还有营养，安神助眠、补充体力、补钙锁钙。
                  </div>
                  <div class="col-2-image">
                    <div :class="{'col-2-image-item':true,'col-2-image-play':s==3}" v-for="s in 6" :key="s">
                      <el-image style="width: 50px; height: 50px"
                        src="https://img13.360buyimg.com/seckillcms/s250x250_jfs/t1/27510/30/17238/111828/62a449f1Eb0c679a6/1cee2abb190eea27.jpg"
                        fit="cover"></el-image>
                      <i class="el-icon-video-play" v-if="s == 3"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ContentEvaluate',
    data() {
      return {
        total:100,
        radio1: 'No.1',
        queryParams:{
          pageNum:1,
          pageSize:10
        },
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        value: 3.7
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>
<style lang="scss" scoped>
  .content {
    padding-right: 50px;
    .col-2-image{
      display: flex;
      .col-2-image-item{
        position: relative;
        cursor: pointer;
          .el-icon-video-play{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: #FFFFFF;
            font-size: 30px;
          }
          &+.col-2-image-item{
            margin-left: 10px;
          }
      }
      .col-2-image-play::after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: rgba(0,0,0,0.2);
      }
    }
    .list {
        padding-left: 40px;
      .list-item {
        display: flex;
        border: 2px solid #f2f2f2;
        border-radius: 4px;
        min-height: 150px;
        &+.list-item{
          margin-top: 10px;
        }
        .col-1 {
          width: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 2px solid #f2f2f2;
        }

        .col-2 {
          flex: 1;
          box-sizing: border-box;
          padding: 20px 25px;
          .col-2-text{
            margin: 8px 0;
          }
          .col-2-title {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }

    .image {
      border: 2px solid #f2f2f2;
      border-radius: 4px;
      min-height: 150px;
      margin-bottom: 10px;
      margin-left: 40px;
      .image-item {
        margin-left: 10px;
      }
    }
  }
</style>
